import React, { useEffect, useState } from 'react';
import { Card, Table } from 'antd';
import cluster from './graph.json';
import plotComplexNetworck from '../../lib/plotComplexNetwork';
import './tooltip.css';
// eslint-disable-next-line
export default () => {
  const [unbalanceNodes, setUnbalanceNodes] = useState([]);
  useEffect(() => {
    plotComplexNetworck(cluster, 'container');
    getUnbalanceNodes();
  }, []);
  const columns1 = [
    {
      title: '节点数',
      dataIndex: 'nodeNum',
      key: 'nodeNum',
    },
    {
      title: '正边数',
      dataIndex: 'p_edgeNum',
      key: 'p_edgeNum',
    },
    {
      title: '负边数',
      dataIndex: 'n_edgeNum',
      key: 'n_edgeNum',
    },
    {
      title: '集群数',
      dataIndex: 'communityNum',
      key: 'communityNum',
    },
    {
      title: '最小不平衡边数',
      dataIndex: 'bestTarget',
      key: 'bestTarget',
    },
  ];
  const dataSource = [
    {
      nodeNum: 233,
      p_edgeNum: 575,
      n_edgeNum: 30,
      communityNum: 10,
      bestTarget: 16,
    },
  ];
  const columns2 = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '用户名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '集群标识',
      dataIndex: 'cluster',
      key: 'cluster',
    },
  ];
  const getUnbalanceNodes = () => {
    const unbalanceEdges = cluster.edges.filter(edge => !edge.isBalanceEdge);
    let indexs = [];
    unbalanceEdges.forEach(edge => {
      const index = Number(edge.target);
      // const node = { ...cluster.nodes[index] };
      // delete node.type;
      indexs.push(index);
    });
    indexs = [...new Set(indexs)];
    const nodes = indexs.map(i => {
      const node = { ...cluster.nodes[i] };
      delete node.type;
      return node;
    });
    setUnbalanceNodes(nodes);
  };
  return (
    <>
      <Card title="豆瓣电影">
        <Card title="网络特征" type="inner">
          <Table dataSource={dataSource} columns={columns1} pagination={false} size="small" />
        </Card>
        <Card title="说明" type="inner">
          在下图的拓扑结构中，顶点代表电影或用户，颜色相同的顶点属于同一集群，绿色的边表示用户对电影的好评，红色的边则表示差评，其实加粗的边为不平衡边
        </Card>
        <Card title="拓扑结构" type="inner">
          <div id="container" style={{ width: '500px', height: '500px', margin: '0 auto' }} />
        </Card>
        <Card title="不平衡节点" type="inner">
          <Table dataSource={unbalanceNodes} columns={columns2} pagination={false} size="small" />
        </Card>
      </Card>
    </>
  );
};
